<template>
  <div class="nodeBox" :class="{'isHovered': isHovered}" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
    <span>{{ nodeData.nodeName || '--' }}</span>
  </div>
</template>

<script>
export default {
  data(){
    return{
      nodeData: {},
      isHovered: false,
    }
  },
  props: {
    properties: {
      type: Object,
      default: () => ({})
    },
  },
  mounted() {
    this.nodeData = this.properties.nodeData || {};
  },
  methods: {
  }
}
</script>

<style scoped>
.nodeBox{
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: #38adff 1px solid;
  text-align: center;
}
.isHovered{
}


</style>

